<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="google-site-verification" content="yaeorbXgKPwp5BDegBtAJEHYWFEFE-BViWTj74gJPrw" />
<!--  -->
<link href="/css/default.css" type="text/css" rel="stylesheet" />
<!--  -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/lang/cn.js"></script>
<script type="text/javascript" src="/js/mac/core.js"></script><title>JQuery MagicCombo Auto Complete 示例</title>
<meta name="description" content="JQuery MagicCombo Auto Complete 示例" />
<meta name="keywords" content="JQuery ComboBox Plugin" />
<link href="/javascript/combo/css/default.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/js/mac/combo.js"></script>
<script type="text/javascript">
$(function(){
	$('#nav_jump').change(function(){
		location = './' + this.value + '.html';
	}).val('autoCp');
	$('.demoSource').val($('#demo').html());
});
</script>
</head>
<body>
<style stype="text/css">
#head { height: 60px; background-color: #333; }
#head img { float: left; border: none; }
#head .right { float: right; height: 60px; color: #FFF; text-align: right; }
#head .right a { color: #CCC; font-size: 16px; color: #FFF; }
#head .title {
	color: #F93; float: left; height: 60px; line-height: 60px;
	font-size: 40px; font-family: Impact, 'Comic Sans MS';
}
#head a { color: #F93; text-decoration: underline; }
.hr { height: 12px; background: transparent url(/css/images/nm-b.png) repeat-x; }
</style>
<div id="head">
	<a href="/cn/"><img src="/css/images/logo_s.png" alt="logo of boarsoft.com" /></a>
	<div class="title"><a href="/cn/">boarsoft.com</a></div>
	<div class="right">
		<a href="/public/lang.php?l=en">English</a>
		|
		<a href="/public/lang.php?l=cn">简体中文</a>
		|
		<a href="http://www.jquery.com" target="_blank">JQuery</a>
		|
		<a href="http://www.jqueryui.com" target="_blank">JQuery UI</a>
		|
		<a href="http://code.google.com/p/dynatree/" target="_blank">JQuery Dynatree Plugin</a>
		&nbsp;&nbsp;
		<br/>
		<br/>
		This site has JQuery, Ext/Sencha Plugins, such as: Grid Combobox Tree Tabs&nbsp;&nbsp;<br/>
		Please use IE7+, FireFox, Chrome&nbsp;&nbsp;
	</div>
</div>
<div class="hr"></div><div id="nav">
	<div id="nav_path">
		&nbsp;&nbsp;
		<a href="/cn/">Home</a>
		&gt;
		<a href="/cn/javascript">Javascript</a>
		&gt;
		<a href="/cn/javascript/combo">JQuery MagicCombo</a>
		&gt;
		JQuery MagicCombo Auto Complete 示例	</div>
	<div id="nav_back">
		<a href="/cn/javascript/combo/doc">文档</a>
		|
		<a href="javascript:history.back()">后退</a>
		|
		<a href="/cn/javascript">下载</a>
		|
		<select id="nav_jump">
			<option value="basic">JQuery MagicCombo 下拉框基本功能示例</option>
			<option value="remote">JQuery MagicCombo 远程加载数据示例</option>
			<option value="custom">JQuery MagicCombo 自定义样式示例</option>
			<option value="grid1">JQuery MagicCombo Grid单选示例</option>
			<option value="grid2">JQuery MagicCombo Grid多选示例</option>
			<option value="autoCp">JQuery MagicCombo Auto Complete 示例</option>
		</select>
		&nbsp;&nbsp;
	</div>
	<div class="clear"></div>
</div>
<div class="demoInfo">
	<h2 class="demoTitle">JQuery MagicCombo Auto Complete 示例</h2>
</div>
<div id="demo" class="demoPanel"><script type="text/javascript" src="/js/mac/combo_autoCp.js"></script>
<script type="text/javascript">
$(function(){
	var dd = [{
		code: 'dax',
		name: 'Henry Dax'
	},{
		code: 'jerry',
		name: 'Jerry Pang'
	},{
		code: 'tony',
		name: 'Tony Wang'
	},{
		code: 'jenny',
		name: 'Jenny Huang'
	},{
		code: 'daniel',
		name: 'Daniel Berger'
	}];
	var cfg = {
		keyField: 'code',
		displayField: 'name',
		equals: function(x, k, v, dd){
			//return x && x.indexOf(v)>-1;
			return x && x.toLowerCase().indexOf(v.toLowerCase())>-1; 
		},
		multiSelect: false,
		width: 200,
		boxWidth: 200,
		cols : [{
			field: 'code', width: '30%'
		},{
			field: 'name', width: '70%'
		}],
		data: dd
	};
	var cfg1 = $.extend({}, cfg);
	var cb1 = $('#combo1').mac('combo', cfg1);
	cb1.mac('combo_autoCp', {
		by: 'name',
		minChars: 2
	});
	/*
	$('#get1').click(function(){
		alert(cb1.selected);
	});
	$('#set1').click(function(){
		cb1.select(2);
	});
	var cfg2 = $.extend({}, cfg);
	cfg2.multiSelect = true;
	var cb2 = $('#combo2').mac('combo', cfg2);
	$('#get2').click(function(){
		alert(cb2.selected.join(','));
	});
	$('#set2').click(function(){
		cb2.select([2,4]);
	});
	*/
});
</script>
<h3>multiSelect = false (This is a beta version)</h3>
<ul>
	<li>press DOWN to expand combo</li>
	<li>press UP/DOWN move selection.</li>
	<li>press RETURN to pick item.</li>
	<li>enter user name and press TAB to lookup by user name.</li>
</ul>
<div id="combo1" class="combo"></div>
<!--
<h3>multiSelect = true</h3>
<div id="combo2" class="combo"></div><br/>
&nbsp;&nbsp;<button id="get2">get2</button>&nbsp;<button id="set2">set2</button>
--></div>
<textarea class="demoSource" wrap="off"></textarea>
<iframe src="/javascript/related.php" class="related"></iframe>
<div class="clear" style="height: 8px;"></div>
<div style="text-align: right;">
	Copyright © 2011. All rights reserved&nbsp;&nbsp;蜀ICP备11014774号-1&nbsp;&nbsp;
	QQ: 7213571&nbsp;&nbsp;MSN: pyh_jerry@163.com&nbsp;&nbsp;E-mail: pyh_jerry@163.com&nbsp;&nbsp;
<!--
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
-->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-24473339-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Ffc0b0282216be3d16055855d8c0e72d9' type='text/javascript'%3E%3C/script%3E"));
</script>
	&nbsp;&nbsp;
</div></body>
</html>
